<template>
	<view class="content">
		<view class="panel">
			<view class="panel-content">
				<view class="title"><text>{{transport.businessNumber}}</text></view>
				<view class="title"><text>{{transport.statusName}}</text></view>
				<view class="title-second"><text>货物已经于{{transport.createDate}}发出</text></view>
				<view class="title-second"><text>司机为{{transport.driverName}}，随车电话：{{transport.driverPhone}}</text></view>
			</view>
		</view>
		<view class="panel">
			<view class="panel-title"><text>轨迹记录({{yingyanStatusName}})</text></view>
			<view class="panel-content">


				<view class="dogner-form-item">
					<!-- <button style="width: 100%;" type="primary" @click="startTrace()" v-if="!transport.startTime&&!transport.endTime&&yingyanStatus==0">开始记录</button> -->
					<!-- <button style="width: 100%;" type="primary" @click="stopTrace()" v-if="transport.startTime&&!transport.endTime&&yingyanStatus!=0">停止记录</button> -->
					<button style="width: 100%;" type="primary" @click="startTrace()" v-if="yingyanStatus==0">开始记录</button>
					<button style="width: 100%;" type="primary" @click="stopTrace()" v-if="yingyanStatus!=0">停止记录</button>
					<button style="width: 100%;" type="default" @click="pauseTrace()" v-if="transport.startTime&&!transport.endTime&&yingyanStatus==1">暂停记录</button>
					<button style="width: 100%;" type="default" @click="resumeTrace()" v-if="transport.startTime&&!transport.endTime&&yingyanStatus==2">恢复记录</button>
				</view>
				<view class="dogner-form-item" v-if="transport.startTime&&transport.endTime">
					<button style="width: 100%;" type="default">轨迹回放</button>
				</view>
			</view>
		</view>
		<view class="panel">
			<view class="panel-title"><text>便捷导航</text></view>
			<view class="panel-content">
				<view class="dogner-form-item">
					<view class="donger-from-item-label">出发地：</view>
					<view class="donger-from-item-obj"> <input class="uni-input" disabled="true" v-model="transport.startAddress" /></view>
				</view>
				<view class="dogner-form-item">
					<view class="donger-from-item-label">目的地：</view>
					<view class="donger-from-item-obj"> <input class="uni-input" disabled="true" v-model="transport.destination" /></view>
				</view>
				<view class="dogner-form-item">
					<button style="width: 100%;" type="primary" @click="openMap()">开始导航</button>
				</view>
			</view>
		</view>
		<view class="panel">
			<view class="panel-title"><text>到厂处理</text></view>
			<view class="dogner-form-item">
				<view class="donger-from-item-label">接货人：</view>
				<view class="donger-from-item-obj"> <input class="uni-input" disabled="true" v-model="transport.contactUserName" /></view>
			</view>
			<view class="dogner-form-item">
				<view class="donger-from-item-label">接货人业务号：</view>
				<view class="donger-from-item-obj"> <input class="uni-input" disabled="true" v-model="transport.contactUserPhone" /></view>
			</view>
			<view class="dogner-form-item" @click="callContactor">
				<view class="donger-from-item-label">接货人电话：</view>
				<view class="donger-from-item-obj"> <input class="uni-input" disabled="true" v-model="transport.contactUserPhone" /></view>
			</view>
			<view class="panel-content">
				<view class="dogner-form-item">
					<button style="width: 100%;" type="primary">到厂通知</button>
				</view>
			</view>
		</view>
		<view class="panel">
			<view class="panel-title"><text>上传判级小票</text></view>
			<view class="panel-content"></view>
		</view>
	</view>
	</view>
</template>

<script>
	import tradeService from '@/api/trade.js';
	import yingyan from '@/api/yingyan.js'
	export default {
		data() {
			return {
				transport: {},
				yingyanStatus: 0,
				yingyanStatusName: "未记录",
				setIntervalFlag: ""
			};
		},
		watch: {
			yingyanStatus: function(newStatus, oldStatus) {
				switch (newStatus) {
					case 0:
						this.yingyanStatusName = "未记录"
						break;
					case 1:
						this.yingyanStatusName = "记录中。。。"
						break;
					case 2:
						this.yingyanStatusName = "已暂停。。。"
						break;
					default:
						break;
				}
			}
		},
		methods: {
			getDetail: function(id) {
				uni.showLoading({
					title: "数据加载中..."
				});
				tradeService.transportDetail(id).then((res) => {
					uni.hideLoading();
					console.log(JSON.stringify(res.data.data));
					if (res.data.msg) {
						uni.showToast({
							icon: "none",
							title: res.data.msg,
							duration: 2000
						});
					}

					if (res.data.success) {
						this.transport = res.data.data;
					}

					uni.stopPullDownRefresh()
				});
			},
			startTrace: function() {
				//服务器记录开始时间
				//启动鹰眼服务
				yingyan.startTrace(this.transport.carNumber);
				this.yingyanStatus = yingyan.getStatus();
				console.log(this.yingyanStatus)
			},
			pauseTrace: function() {
				yingyan.pauseTrace();
				this.yingyanStatus = yingyan.getStatus();
				console.log(this.yingyanStatus)
			},
			resumeTrace: function() {
				yingyan.resumeTrace();
				this.yingyanStatus = yingyan.getStatus();
				console.log(this.yingyanStatus)
			},
			stopTrace: function() {
				yingyan.stopTrace();
				this.yingyanStatus = yingyan.getStatus();
				console.log(this.yingyanStatus)
			},
			openMap: function() {
				yingyan.launchMapApp({
					dlat: 35.442679,
					dlon: 119.542877,
					dname: "日照"
				});
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			//
			// this.getDetail("6c5a2e76-e28d-47e2-9f78-7f7373f2472e");
			this.getDetail(option.id);
			this.yingyanStatus = yingyan.getStatus();
			console.log(this.yingyanStatus);
			this.setIntervalFlag = setInterval(() => {
				this.yingyanStatus = yingyan.getStatus();
			}, 3000);
		},
		onPullDownRefresh() {
			if (this.transport.id) {
				this.getDetail(this.transport.id);
				this.yingyanStatus = yingyan.getStatus();
				console.log(this.yingyanStatus)
			}
		},
		callContactor(){
			if(this.transport.contactUserPhone){
				uni.makePhoneCall({
					phoneNumber:this.transport.contactUserPhone
				})
			}
		}
	}
</script>

<style>
	.content {
		background: rgb(242, 242, 242);
	}

	.panel {
		background: #FFFFFF;
		margin-bottom: 10px;
	}

	.panel-title {
		font-size: 14px;
		line-height: 1;
		color: #1c2438;
		padding: 20px 16px 10px
	}

	.panel-content {
		width: 100%;
		font-size: 14px;
		line-height: 1;
		color: #1c2438;
		padding: 20px 0 10px
	}

	button {
		margin-bottom: 10upx;
	}

	.dogner-form-item {
		border: 0 !important;
	}

	.title {
		text-align: center;
		color: #000000;
		font-weight: bold;
		font-size: 18px;
		width: 100%;
		margin-bottom: 20upx;
	}

	.title-second {
		text-align: center;
		width: 100%;
		color: #999999;
		font-size: 14px;
		margin-bottom: 0upx;
	}
</style>
